<script setup>
import { useRoute } from 'vue-router'
import {  onMounted,ref } from 'vue'
import { getadmin ,updateuser} from '@/api/index.js'


import dayjs from 'dayjs'



const route = useRoute() // 获取当前路由信息
const routeName = route.meta.name
const routeall = route.meta.describe


const missions = ref({
  pageNum:1,
  pageSize:10
})

// 打开浏览器时获取用户列表信息
onMounted(()=>{
  huoquadmin()
  // permisionName()
})

// 获取用户列表信息 进行存储
const tableData = ref({
  data:[],
  total:0,
})


// 获取用户列表信息  以便进行渲染
const huoquadmin = async () =>{
  const res = await getadmin(missions.value.pageNum,missions.value.pageSize)
  const {list,total} = res.data.data
  list.forEach(item=>{
    item.create_time = dayjs(item.create_time).format('YYYY-MM-DD')
  })
  tableData.value.data = list
  tableData.value.total = total
  // console.log(list);
  active.value =  tableData.value.data[0].permissions_id !== 0 ? '普通管理员' : '超级管理员'

}



// 获取管理员权限信息




const formRef = ref()

// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
  ],
 mobile: [
    { required: true, message: '您还没有输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号长度必须是11位', trigger: 'blur' },
  ],
}


const form = ref({
  name: '',
  mobile: '',
})

// 是否打开弹窗
const dialogFormVisible = ref(false)
// 编辑
const deleteRow =  (row) =>{
  // console.log(row);
  dialogFormVisible.value = true
  form.value = row
}


// 选择器value
const value = ref('')


const props = {
  value: 'id',
  label: 'label',
  options: 'options',
  disabled: 'disabled',
}

const options = [
  {
    id: 'admin',  // 应该是一个有意义的值，而不是空字符串
    label: 'DIDI',
  },
  {
    id: 'user',   // 修改为有意义的值
    label: '超级管理员',
  },
]

const active = ref("超级管理员")
// 确认
const queren =  async (formEl) =>{
 if (!formEl) return
  await formEl.validate((valid, fields) => {
    if(valid) {

      //   console.log('表单数据:', form.value)
      // console.log('选择的权限:', value.value)  // 获取select的值

      // 根据选择的值设置 permissions_id
      const selectedPermission = options.find(option => option.id === value.value)
      // console.log('选择的权限名称:', selectedPermission?.label)
      // console.log(form.value.name,form.value.mobile,selectedPermission?.label)
      const resuser = selectedPermission?.label === '超级管理员' ? 0 : 1
      console.log(resuser);

      // 调用接口
     updateuser(form.value.name,resuser)
      alert("修改成功")
      dialogFormVisible.value = false
      huoquadmin()
      // permisionName()
      // getadminselectlist()
      huoquadmin()
      huoquadmin()
    } else {
      console.log('error submit!', fields)
    }
  })
}




// const permissions_id = ref(0)

</script>

<template>
  <panelHead :routeName="routeName" :routeall="routeall"></panelHead>
    <el-table :data="tableData.data" style="width: 100%" max-height="200">
    <el-table-column fixed prop="id" label="id" width="200" />
    <el-table-column prop="name" label="昵称" width="200" />
    <el-table-column prop="permissions_id" label="所属组别" width="200">

        <el-tag>{{ active }}</el-tag>


    </el-table-column>

    <el-table-column prop="mobile" label="手机号"  width="200" />
    <el-table-column prop="active" label="状态" width="200">
        <el-tag v-if="tableData.data[0].active === 1" type="success">正常</el-tag>
        <el-tag v-else type="danger">异常</el-tag>
       </el-table-column>
    <el-table-column prop="create_time" label="创造时间" width="220" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.row)"
        >
          编辑
        </el-button>
      </template>
    </el-table-column>
  </el-table>


     <el-dialog v-model="dialogFormVisible" title="编辑用户" width="700">
    <el-form
    ref="formRef"
    label-width="100px"
    label-position="left"
    :model="form"
    :rules="rules"
    >
      <el-form-item label="手机号" prop="mobile" label-width="80px">
        <el-input v-model="form.mobile" disabled autocomplete="off" />
      </el-form-item>
       <el-form-item label="呢称" prop="name" label-width="80px">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
       <el-form-item label="菜单权限" label-width="80px" prop="">
        <el-select
      v-model="value"
      :options="options"
      :props="props"
      placeholder="请选择身份"
      style="width: 240px"
    />



      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button  @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary"  @click="queren(formRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>

</style>
